<template>
  <div class="layout">
    <header class="layout-header">
      <el-row>
        <el-col :span="4">
          <h3>宠物领养管理系统</h3>
          <!-- <p>Content Manage System</p> -->
        </el-col>
        <el-col :span="4" :offset="16">
          <div class="box">
            <div class="link" v-if="!isLogin">
              <router-link to="/login">
                <el-icon>
                  <Connection />
                </el-icon>
                <span>登录</span>
              </router-link>
            </div>
            <div class="user" v-else>
              <router-link to="/admin">
                <el-icon>
                  <User />
                </el-icon>
                <span>{{ nickName }}</span>
              </router-link> | <button @click="logoutFn">退出</button>
            </div>
          </div>
        </el-col>
      </el-row>
    </header>
    <main>
      <el-row>
        <el-col :span="4">
          <aside>
            <!-- 侧栏菜单 -->
            <my-menu></my-menu>
          </aside>
        </el-col>
        <el-col :span="20">
          <section>
            <top-bar></top-bar>
            <!-- 内容区域 (二级路由出口) -->
            <router-view></router-view>
          </section>
        </el-col>
      </el-row>
    </main>
    <!-- <footer>尾部</footer> -->
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="500" draggable>
      <span>您要退出账号吗?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="comfirFn">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
@import './common/scss/variable.scss';
$minHeihgt: 1000px;

.layout {
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;

  .layout-header {
    width: 100%;
    background-color: #edaf4f;
    padding: 25px 20px;

    .box {
      text-align: right;

      button {
        background-color: transparent;
        font-size: 16px;
        cursor: pointer;
      }

      .el-icon,
      span {
        vertical-align: middle;
      }

      .el-icon {
        margin-right: 5px;
      }
    }
  }

  main {
    width: 100%;

    aside {
      min-height: $minHeihgt;
      background-color: #f6e8ce;
      padding: 15px 20px;
    }

    section {
      min-height: $minHeihgt;
      background-color: #fff6e5;
      padding: 15px 20px;
    }
  }
}
</style>

<script setup lang="ts">
// 导入ref函数
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import MyMenu from './components/MyMenu.vue'
import TopBar from './components/TopBar.vue'

// 初始化首页
let token = localStorage.getItem("TOKEN")
let nickName = ref("");
let isLogin = ref(false);
let dialogVisible = ref(false);
const $router = useRouter();
if (token) {
  isLogin.value = true;
  nickName.value = localStorage.getItem("NICK_NAME") as string;
}
const logoutFn = () => {
  dialogVisible.value = true;
}
const comfirFn = () => {
  // 布尔值设置为false
  isLogin.value = false;
  // 移除token
  localStorage.removeItem("TOKEN");
  localStorage.removeItem("NICK_NAME");
  // 隐藏对话框
  dialogVisible.value = false
  // 延迟跳转登录页
  $router.replace({
    path: '/login'
  })
}


</script>